<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧2</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            /*使用固定定位，紧贴着html的4个边，就可以与整个页面窗口一样大*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<!--遮罩层-->
<div class="mask"></div>
<!--内容-->
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum error labore
        mollitia officia quidem veritatis. Accusamus commodi consequatur ex ipsa iste iusto laudantium minus molestiae
        reiciendis suscipit!
    </div>
    <div>Accusamus accusantium commodi, eveniet expedita illo maiores maxime omnis perferendis repellat rerum ut vitae?
        Culpa eveniet hic ipsam quo tenetur! Aliquid aut distinctio magni nam nulla rem reprehenderit saepe temporibus!
    </div>
    <div>Eos fuga iure maiores minus nam nobis qui repudiandae sapiente soluta voluptate? Fugiat, odit, omnis. Ab
        architecto aut cupiditate ea illum nemo obcaecati odit officiis placeat porro, ratione ut, vel.
    </div>
    <div>Aliquid amet architecto at culpa deserunt ea exercitationem expedita, facilis harum impedit iste natus
        necessitatibus obcaecati odio optio perspiciatis placeat porro quam reiciendis rerum temporibus, ut voluptas
        voluptatem! Eaque, eligendi?
    </div>
    <div>A ea id, iste iusto officiis qui quibusdam rerum saepe? Accusantium doloremque incidunt iure possimus quam,
        sequi. Amet animi asperiores aut consequatur distinctio eveniet excepturi, facere id illum ipsum soluta!
    </div>
    <div>Animi ducimus eius impedit iusto natus quam recusandae vitae. Aliquam debitis dolorem eaque iure libero
        molestiae nobis praesentium quisquam quo. Commodi necessitatibus nobis perferendis quibusdam quisquam quo
        ratione reiciendis voluptas.
    </div>
    <div>Accusantium ad consequatur culpa debitis, doloremque error explicabo in ipsam maxime minus, nam odio pariatur
        placeat, praesentium quibusdam repudiandae sed vero voluptatum! Facilis laboriosam maxime quod soluta! Neque
        officiis, sit.
    </div>
    <div>Accusamus at consectetur corporis culpa cum dolor eaque esse facilis fuga id inventore iste iure minus
        molestiae, natus placeat quae quo quos ratione reiciendis rem soluta, unde ut veritatis vitae.
    </div>
    <div>Amet at atque corporis iste, minima mollitia nemo numquam repellat. Dolore non, voluptatibus? Alias animi modi
        non obcaecati provident quam, qui quidem sequi tempora veniam? Distinctio excepturi placeat quaerat voluptate.
    </div>
    <div>Adipisci alias architecto at corporis debitis dolorum eligendi enim esse, eum ex, expedita facere incidunt
        laboriosam magni nam nobis nulla obcaecati, pariatur quibusdam quos sequi suscipit tenetur vel velit voluptas.
    </div>
    <div>A aspernatur dolorem expedita fugiat molestiae perspiciatis, recusandae ullam voluptates. Asperiores assumenda
        debitis ducimus est, expedita labore natus nemo non optio perspiciatis quam quidem sequi sunt, totam veniam
        voluptas voluptatum!
    </div>
    <div>At debitis eius est magni obcaecati quae quam quod recusandae reiciendis? Asperiores atque dolore obcaecati
        omnis qui reiciendis repudiandae sapiente soluta. Culpa debitis hic nisi reprehenderit rerum sit tenetur vitae?
    </div>
    <div>Accusantium aliquid distinctio eaque illo iusto possimus qui repellendus voluptas! Aperiam aut delectus eaque
        ex excepturi explicabo iure laboriosam mollitia nemo nihil, porro rem, similique, temporibus. Impedit ipsam nam
        velit.
    </div>
    <div>Adipisci aliquid at beatae debitis, error libero omnis quaerat velit. Accusamus assumenda distinctio dolore
        eaque eum hic inventore laborum natus nemo quas. Adipisci amet eius iste laboriosam nisi, provident quasi?
    </div>
    <div>Aliquam ex expedita minima, odit officiis quibusdam ullam voluptas. A dignissimos ducimus eveniet excepturi
        impedit in maxime reiciendis totam ullam, ut. Error id illo in ipsum nihil perferendis ut voluptatem.
    </div>
    <div>Ad, aperiam assumenda, corporis culpa debitis error explicabo facere harum, hic illo inventore laboriosam
        libero magni maxime minus nam nostrum porro possimus repudiandae sed similique tempora tempore veritatis
        voluptates voluptatibus.
    </div>
    <div>At fuga harum in numquam omnis quas reiciendis reprehenderit! Amet cum debitis, dolorem, dolores ducimus esse
        excepturi ipsum minus non officia officiis perferendis provident quia repellat saepe totam velit. Ratione.
    </div>
    <div>Commodi perferendis quasi vel! Adipisci architecto assumenda autem debitis doloremque earum esse modi, mollitia
        nesciunt officiis pariatur quod saepe sit suscipit vitae voluptas voluptates? Corporis deleniti fugit quisquam
        suscipit unde?
    </div>
    <div>Ab accusamus aliquam amet atque aut commodi corporis, eius, enim ex exercitationem hic iste laborum libero
        molestias nisi omnis quod rem reprehenderit saepe ullam. Natus omnis quos repellendus sapiente velit?
    </div>
    <div>A accusantium aperiam, assumenda blanditiis cumque debitis eligendi esse fuga fugiat harum impedit iusto labore
        maxime minus, molestias non odio odit perferendis possimus provident quaerat rem sequi tenetur ut velit?
    </div>
    <div>Accusantium atque cum debitis dolores enim eos eveniet ex exercitationem fugiat hic id ipsa ipsam iusto
        laudantium nihil nulla optio, perferendis placeat praesentium quod repudiandae, similique sit tenetur totam vel!
    </div>
    <div>Assumenda at atque aut dicta dolores et exercitationem, expedita iste laborum mollitia natus nobis numquam quae
        quo quod repellat, sapiente velit! Alias consequuntur dolor ducimus maiores obcaecati repellat veritatis
        voluptatem.
    </div>
    <div>Adipisci animi aspernatur consequuntur error et eveniet excepturi exercitationem expedita explicabo hic illum,
        incidunt, iure nisi officia omnis pariatur perspiciatis placeat possimus, quasi quibusdam recusandae repudiandae
        sapiente sit vero vitae?
    </div>
    <div>Deleniti dicta incidunt porro totam. Et labore minus nam quas quidem soluta? Accusantium assumenda dolorum
        impedit incidunt laboriosam perspiciatis quod quos reiciendis? Aspernatur dolore eius maxime officiis quos rem
        repellat?
    </div>
    <div>A adipisci aliquam at blanditiis consectetur eius, fuga illo illum impedit ipsam magni maiores modi nemo neque
        placeat provident quibusdam quis quo reiciendis sequi suscipit tenetur ullam ut vel voluptatum?
    </div>
    <div>A architecto asperiores dolores dolorum eaque eveniet ex excepturi ipsam, magni minima nemo nobis officia
        praesentium provident quisquam saepe, sed soluta tempore totam unde veniam voluptate voluptates. Fugiat, itaque
        officiis!
    </div>
    <div>At commodi debitis distinctio eius eum fugit iste iusto quae sapiente sequi! Atque corporis dolorem dolores
        esse, ex illum iure maiores mollitia nihil non nostrum porro repellendus sunt tempora voluptatem.
    </div>
    <div>Ad assumenda, corporis debitis distinctio doloribus eius esse fugit impedit in ipsam molestiae mollitia
        praesentium quae saepe sapiente sunt temporibus! Ab aliquid asperiores ea eveniet id magnam quis, quos saepe!
    </div>
    <div>Amet dolor dolorem doloremque esse facilis inventore ipsa iure molestiae nisi, officiis perspiciatis porro quas
        quasi rerum saepe tempora voluptas. Amet consectetur itaque nemo quidem, sint unde. Atque, illo, nostrum!
    </div>
    <div>Architecto eligendi nobis sequi temporibus unde. Ad animi cumque cupiditate distinctio enim non, numquam ut
        vero voluptates? Accusamus culpa eligendi officia sint ullam. Distinctio, ducimus illo maxime mollitia placeat
        provident.
    </div>
    <div>Adipisci aliquid, autem consequatur consequuntur culpa cupiditate, deserunt dolorum ea eos eum expedita hic
        illo ipsum laboriosam modi molestiae quidem, quisquam rerum voluptate voluptatem! Eaque eius illo necessitatibus
        nihil qui.
    </div>
    <div>Aliquam, animi asperiores assumenda consequuntur corporis debitis deserunt doloremque eaque earum error
        exercitationem harum id in iusto odio optio porro quo quod, repellat reprehenderit, sit unde vel voluptate.
        Itaque, nemo.
    </div>
    <div>Accusamus corporis dignissimos dolor eaque facere fuga fugit inventore ipsa iure, maxime molestias nemo numquam
        officiis provident qui quidem quod quos sed sequi tempora tempore tenetur vel voluptate voluptatem voluptates.
    </div>
    <div>Debitis eaque eveniet fugiat id in itaque nisi quasi quos unde voluptatum! Ad corporis cumque delectus
        dignissimos, fugit modi molestias, nam, perspiciatis possimus praesentium quasi reiciendis repellat rerum sunt
        vero!
    </div>
    <div>Consectetur doloremque magni natus obcaecati quibusdam! Assumenda, at earum itaque iure libero sapiente vel. Ab
        alias autem delectus dolorem doloremque dolores doloribus eius hic nostrum nulla sed soluta, voluptatem.
        Corporis?
    </div>
    <div>Corporis delectus dolor error, et fuga hic iure laudantium magnam maxime molestias necessitatibus nesciunt
        numquam officiis, perspiciatis repellendus temporibus tenetur, totam. Accusamus alias architecto quasi quia
        repellat tempora voluptate voluptates!
    </div>
    <div>A ad at blanditiis cumque dolore error ipsum, iure iusto modi nemo obcaecati perspiciatis quos, ratione sint
        unde velit voluptatum. Ad deleniti itaque laboriosam molestias non quaerat totam vel voluptates.
    </div>
    <div>Aspernatur nisi quae vel. Adipisci aliquid culpa delectus dolore ducimus earum est excepturi exercitationem
        expedita harum, id iste modi nesciunt, officia perspiciatis quas ratione recusandae repellat, sapiente soluta
        velit voluptate.
    </div>
    <div>Accusamus cumque facere iusto maiores reprehenderit sed vitae voluptates? Architecto atque, delectus dolor
        facilis nobis obcaecati quibusdam reiciendis voluptas voluptatem voluptates! Animi consectetur dignissimos
        fugit, laborum libero nostrum quibusdam? Culpa.
    </div>
    <div>Consectetur cupiditate earum eveniet incidunt ipsam mollitia numquam repellat temporibus, vitae voluptates.
        Dolore dolorum explicabo nam omnis optio praesentium quae. Dolorum, error nemo quas sed sequi totam ullam.
        Blanditiis, quisquam?
    </div>
    <div>Amet atque dolorem ea eligendi et eveniet facilis laborum maiores necessitatibus obcaecati possimus recusandae
        saepe, soluta suscipit voluptatibus! Architecto debitis eius facilis libero, maxime minus nemo nesciunt nisi
        odit quasi?
    </div>
    <div>Aliquam delectus, earum eos neque placeat rerum tempora vitae voluptatem? Accusantium animi aperiam distinctio
        facilis impedit maxime minus mollitia nobis nostrum sequi. Consequatur dolorum ea ipsum magnam repellat vero
        voluptatum.
    </div>
    <div>Culpa et excepturi fuga, ipsum officia voluptates voluptatibus. Adipisci aspernatur beatae blanditiis commodi
        consectetur dolorem, eaque in ipsa laboriosam, libero, maxime minima nulla odio saepe sint suscipit tempore
        voluptatibus. Quod?
    </div>
    <div>Alias, aspernatur dolores ea, eligendi eum fugiat impedit ipsum numquam optio quia quibusdam velit
        voluptatibus. Asperiores aspernatur consectetur dolor eveniet sequi? Accusantium adipisci aut culpa magni ut!
        Ipsam nulla, suscipit?
    </div>
    <div>Alias amet dolor enim iste quasi qui! Adipisci, alias aperiam cum debitis, dicta dignissimos doloremque est eum
        hic id iste minus modi nam quae quas quia quis quos reiciendis sunt!
    </div>
    <div>Doloremque eos eum incidunt pariatur, quisquam unde? Animi consequuntur excepturi illo in ipsam iusto
        laboriosam laborum, magnam magni minus similique tempora tempore. Doloremque expedita minima mollitia natus
        nostrum suscipit voluptates.
    </div>
    <div>Adipisci amet atque, ea eos expedita facere ipsam molestias necessitatibus nobis rerum voluptas voluptatum? Ad,
        assumenda aut dignissimos dolorem et ex magnam natus neque nostrum quae quia quidem quo, voluptates!
    </div>
    <div>Ad animi blanditiis consequatur est et, itaque nihil nisi odio pariatur placeat tempora voluptatem? Commodi
        itaque laudantium quis vel vero. Aperiam dignissimos doloremque dolores hic laborum magni maxime rem voluptas?
    </div>
    <div>Corporis explicabo facere incidunt maxime nostrum. Accusantium deleniti, dolorem doloribus eligendi eveniet
        expedita illo illum in itaque iusto molestias officia quae quia repellat, soluta tempore, unde vitae voluptas
        voluptatibus voluptatum?
    </div>
    <div>Accusantium, adipisci, asperiores consectetur doloremque dolores est, ex harum illo ipsam maiores minus
        mollitia odio quis repellat repellendus repudiandae vero! Aperiam blanditiis eum facere laudantium modi omnis
        quam reiciendis veniam.
    </div>
</div>


</body>
</html>